<template>
	<view>
		<view class="page">
			<!-- 标题 -->
			<view class="logo">Deep Operate</view>
			<!-- 标题 -->
			<view class="title">登录</view>
			<!-- 表单 -->
				<up-form :model="form" ref="formRef" labelPosition="top" :rules="rules" labelWidth="60px">
					<view v-show="loginType == 'sms'">
						<up-form-item label="手机号" prop="phone">
							<up-input v-model="form.phone" placeholder="请输入手机号" class="ipt" />
						</up-form-item>
						<up-form-item label="手机验证码" prop="code" labelWidth="100px">
							<up-input v-model="form.code" placeholder="请输入验证码" class="ipt">
								<template #suffix>
									<send-verification-code :mobile="form.phone"
										:checked="checked"></send-verification-code>
								</template>
							</up-input>
						</up-form-item>
					</view>
					<view v-show="loginType == 'email'">
						<up-form-item label="邮箱" prop="email">
							<up-input v-model="form.phone" placeholder="请输入邮箱" class="ipt" />
						</up-form-item>
						<up-form-item label="密码" prop="password">
							<up-input v-model="form.password" placeholder="请输入密码"
								:type="passwordVisible ? 'text' : 'password'" class="ipt password">
								<template #suffix>
									<up-icon :name="passwordVisible ? 'eye-fill' : 'eye-off'" color="#4050b5" size="20"
										:color="'#999'" @click="showPassword"></up-icon>
								</template>
							</up-input>
						</up-form-item>
					</view>
				</up-form>
			<!-- 登录按钮 -->
			<view class="btn">
				<up-button :custom-style="customStyle" type="primary" @click="submitForm" ripple text="登录"></up-button>
			</view>
			<view class="tips flex">
				<view class="tips-right" @click="switchModus">{{ loginType == 'sms' ? '邮箱' : '手机号' }}登录</view>
			</view>
			<!-- 协议 -->
			<view class="agreement">
				<up-checkbox-group>
					<up-checkbox v-model="checked" active-color="#4050b5" size="12"
						@change="checkedChange"></up-checkbox>
				</up-checkbox-group>
				<view class="agreement-text">我已阅读并同意 <text @click="showAgreementDialog">用户协议</text> 与 <text
						@click="showAgreementDialog">隐私政策</text>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<agreement ref="agreementRef" />
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import agreement from '../components/agreement.vue'
const form = reactive({
	phone: '',
	code: '',
	email: '',
	password: ''
})
// 是否同意协议弹框
const checked = ref(false)
// 协议弹框
const agreementRef = ref()
// sms: 手机登录, email: 邮箱登录
const loginType = ref('sms')
// 密码是否可见
const passwordVisible = ref(false)
const customStyle = ref({
	background: '#4050b5',
	color: '#fff',
	borderColor: '#4050b5',

});
const formRef = ref(null)
const rules = ref({
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
	],
	code: [
		{ required: true, message: '请输入验证码', trigger: 'blur' }
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	]
})
// 切换登录方式
const switchModus = () => {
	loginType.value = loginType.value == 'sms' ? 'email' : 'sms'
}
// 显示协议弹框
const showAgreementDialog = () => {
	agreementRef.value.showModus()
}
// 同意协议
const checkedChange = (e) => {
	console.log(e);
	checked.value = e
}
// 显示密码
const showPassword = () => {
	passwordVisible.value = !passwordVisible.value
}
// 验证表单
const validateForm = () => {
	formRef.value?.validate().then(valid => {
		if (valid) {
			console.log('校验通过', form.value);
		} else {
			console.log('校验失败', form.value);
			return false;
		}
	}).catch((e) => {
		console.log('e', e);
	});
};

const submitForm = () => {
	validateForm()
}

// 组件挂载后设置验证规则
// onMounted(() => {
// 	formRef.value.setRules(rules.value)
// })
</script>
<style lang="css">
.u-border,
.up-border {
	border: none !important;
	border-style: none !important;
}
</style>
<style lang="scss" scoped>
.page {
	padding: 40rpx 30rpx 0 30rpx;
	background: #f6f6f6;
	min-height: 100vh;
}

.logo {
	font-size: 50rpx;
	font-weight: 600;
	color: #4050b5;
	margin-bottom: 30rpx;
}

.title {
	font-size: 40rpx;
	font-weight: 600;
	margin-bottom: 20rpx;

}

.ipt {
	border-radius: 8rpx;
	background: #fff;
	width: 100%;
}

.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.btn {
	margin-top: 60rpx;
}

.tips {
	margin-top: 40rpx;
	font-size: 28rpx;

	.tips-left {
		color: #999;

		text {
			color: #4050b5;
		}
	}

	.tips-right {
		color: #4050b5;
	}
}

.agreement {
	margin-top: 140rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;

	.agreement-text {
		font-size: 22rpx;
		color: #999;

		text {
			color: #4050b5;
		}
	}
}

.password {
	padding-right: 10rpx;
}

.code {
	padding-right: 20rpx;
}
</style>
